import { mapState, mapActions } from "vuex";
import { addDepartment, editDepartment, delDepartment } from "@/api/department";

export default {
    data() {
        return {
            defaultProps: {
                label: "name", // 表示 从这个属性显示内容
                children: "departments"
            },
            form: {
                name: "",
                code: "",
                manager: "",
                introduce: ""
            },
            pid: '',
            addDialogVisible: false,
            editDialogVisible: false
        };
    },

    mounted() {
        this.updateDepartmentList();
        this.updateEmployeeInfo();
    },

    methods: {
        ...mapActions("departments", ["updateDepartmentList", "updateEmployeeInfo"]),
        handleCommand(command, id) {
            this.pid = id
            switch (command) {
                case "add":
                    this.addDialogVisible = true;
                    break;
                case "edit":
                    this.editDialogVisible = true;
                    break;
                case "del":
                    this.delEmployee(id);
                    break;
                default:
                    break;
            }
        },
        handleClose(done) {
            this.$confirm("确认关闭？")
                .then(_ => {
                    this.addDialogVisible = false;
                    this.editDialogVisible = false;
                })
                .catch(_ => { });
        },
        async addEmployee() {
            await addDepartment({
                ...this.form,
                pid: this.pid
            });
            this.updateDepartmentList();
            this.addDialogVisible = false;
        },
        async editEmployee() {
            await editDepartment();
            this.updateDepartmentList();
            this.editDialogVisible = false;
        },
        delEmployee(id) {
            this.$confirm("是否删除此条记录?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    delDepartment(id);
                    this.updateDepartmentList();
                    // this.$message({
                    //   type: "success",
                    //   message: "删除成功!"
                    // });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
        }
    },
    computed: {
        ...mapState("departments", ["departmentList", "employeeInfo"]),
        tree() {
            const dealData = (data, isFirst) => {
                const result = [];
                for (const item of data) {
                    if (isFirst && item.pid) {
                        continue;
                    }
                    // 自己的id
                    const id = item.id;
                    // 去data中找有没有自己的孩子（_item.pid === id） >>> filter
                    const children = this.departmentList.filter(d => d.pid === id);
                    item.departments = dealData(children, false);
                    result.push(item);
                }
                return result;
            };
            return dealData(this.departmentList, true);
        }
    }
};